<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  ~   Copyright 1999-2016 Asiainfo Technologies(China),Inc.
  ~
  ~   Licensed under the Apache License, Version 2.0 (the "License");
  ~   you may not use this file except in compliance with the License.
  ~   You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~   Unless required by applicable law or agreed to in writing, software
  ~   distributed under the License is distributed on an "AS IS" BASIS,
  ~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~   See the License for the specific language governing permissions and
  ~   limitations under the License.
  ~
  --%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>业务数据配置列表</title>
    <style>

        .nav-tabs [class*="icon-"] {
            margin-right: 10px;
            font-size: 14px;
        }
        .nav>li>a {
            position: relative;
            display: block;
            padding: 0px 0px 5px 0px;
        }
        /*
        .table-striped > tbody > tr:nth-of-type(odd) {
            background-color: #f8f8f8;
        }
        */
        .table-hover > tbody > tr:hover {
            background-color: #f5f5f5;
        }

        .bg-white{
            background-color: white;
        }
        .popover-content {
            padding: 9px 14px;
        }
        .bwizard-steps {
            pointer-events: none !important;
            cursor: default !important;
        }


    </style>


    <script>

        var SPLIT_CODE = String.fromCharCode(18);

        $(function () {

            $.post("${ctx}/redis-api/getClusters", {isMasterClusterOnly:true}, function(data) {
                if (data.success){
                    loadDataToSelect($('#cluster-list'), data.result, 'id', 'clusterName');
                }
            });
            loadBusiTypes();
            loadBusiDatasources();

            $("#search").click(function () {
                if ($('#cluster-list').val() == ""){
                    toastr.warning("请先从下拉框中选择一个集群！");
                    return;
                }
                if ($('#search-busi-list').val() == ''){
                    toastr.warning("请选择所属业务系统！");
                    return;
                }
                loadBusiDataRules();

            });

            $('#add-busi-data-rule').click(function(){
                showBusiDataRuleWindow();
            });

            //业务数据配置向导页面相关
            $("#wizard").bootstrapWizard({
                tabClass: 'bwizard-steps',
                nextSelector: ".btn-next",
                previousSelector: ".btn-previous",
                finishSelector: ".btn-finish",
                onNext: function(tab, navigation, index) {
                    if (index === 1) {
                        var form1 = $('#busi-data-rule-form1');
                        if (!form1.valid()) {
                            return false;
                        }
                        var sqlEle = form1.find('#sql');
                        var sqlValue = sqlEle.val(), sqlDataValue = sqlEle.data('sql');
                        //缓存sql查询信息，如果sql没有发生变化，将不再查询
                        if (sqlDataValue && sqlDataValue == sqlValue){
                            setWizardFormData();
                            return true;
                        }
                        var params = {dataSourceId:form1.find('#datasourceId').val(), sql:sqlValue};
                        $.post("${ctx}/busi-config/getSqlFields", params, function(data) {
                            if (data.success){
                                var fieldDataList = data.result;
                                //bootstrapTable加载的数组对象为全局引用，所以需要深度拷贝数组
                                $('#save-fields-table').bootstrapTable('load', $.map(fieldDataList, function(value, index){
                                    return $.extend(true, {}, value);
                                }));
                                loadDataToSelect($('#incre-field-list, ' +
                                        '#conditionField-list, ' +
                                        '#conditionField1-list, ' +
                                        '#conditionField2-list, ' +
                                        '#uniqueField-list, ' +
                                        '#conditionFields-list,' +
                                        '#conditionFields2-list'), fieldDataList, "fieldName", "fieldName");
                                setWizardFormData();
                                $('#wizard').bootstrapWizard('show', 1);
                                sqlEle.data('sql', sqlEle.val());
                            }
                        });
                        return false;
                    }
                    if (index === 2){
                        var selectedSaveFields = $('#save-fields-table').bootstrapTable('getSelections');
                        if (selectedSaveFields.length == 0){
                            toastr.warning("请在字段前面打钩选择需要存储的字段！");
                            return false;
                        }
                    }
                },
                onPrevious: function(tab, navigation, index) {
                },
                onTabShow: function(tab, navigation, index) {
                    if (index === 2){
                    }
                },
                onFinish: function(tab, navigation, index){
                    saveBusiDataRule();
                }
            });
            $('input[id*="conditionType-"]').click(function(){
                if ($(this).prop('checked')){
                    showConditionView($(this).val());
                }
            });





            //业务类型配置页面相关
            $('#busi-type-table').bootstrapTable({
                onEditableSave:function (field, row, oldValue, $element) {
                    if (row.id >= 0){
                        row['flag'] = 'U';
                    }
                }
            });
            $('#add-busi-type-btn').click(function(){
                $('#busi-type-table').bootstrapTable('append',{id:(0-$.now()), busiCode:'', busiName:'', flag:'N'}).bootstrapTable('scrollTo','bottom');
            });
            $('#busi-type-window').on('show.bs.modal', function(e){
                loadBusiTypes();
            });
            $('#busi-type-save').click(function(){
                saveBusiType();
            });


            //业务数据源配置页面相关
            $('#append-busi-datasource-btn').click(function () {
                showBusiDatasourceDetailWindow();
            });
            $('#busi-datasource-window').on('show.bs.modal', function(e){
                loadBusiDatasources();
            });
            $('#busi-datasource-detail-window').on('show.bs.modal', function(e){
                var validator = $("#busi-datasource-form").validate();
                validator.resetForm();
            });
            $('#busi-datasource-check').click(function(){
                var form = $("#busi-datasource-form");
                if (!form.valid()){
                    return;
                }
                var params = getBusiDatasourceParams(form);
                $.post("${ctx}/busi-config/checkBusiDatasource", params, function(data) {
                    if (data.success == true){
                        toastr.success("测试连接成功！");
                    }
                });
            });
            $('#busi-datasource-save').click(function(){
                var form = $("#busi-datasource-form");
                if (!form.valid()){
                    return;
                }
                var params = getBusiDatasourceParams(form);
                $.post("${ctx}/busi-config/saveBusiDatasource", params, function(data) {
                    if (data.success == true){
                        toastr.success("保存成功！");
                        $('#busi-datasource-detail-window').modal('hide');
                        loadBusiDatasources();
                    }
                });
            });


        });


        function queryBusiRuleParams(params){
            params.configName = $('#search-config-name').val();
            params.keyPrefix = $('#search-key-prefix').val();
            params.busiTypeId = $('#search-busi-list').val();
            params.clusterId = $('#cluster-list').val();
            return params;
        }
        function loadBusiDataRules(){
            $('#busi-data-rule-table').bootstrapTable('refresh', {url: "${ctx}/busi-config/getBusiDataRuleList"});
        }

        function formatOperColumn(value, row, index){
            var html = '<a href="#" onclick="showBusiDataRuleWindow(\''+ row.id + '\')">修改配置</a> ';
            html+= '<a style="margin-left:10px" href="#" onclick="openOperDataWindow('+row.id+')">读写业务数据</a> ';
            return html;
        }

        function openOperDataWindow(id){
            window.open("${ctx}/data/oper-busi-data?busiDataRuleId="+id, '_blank','top=0,left=0,resizable=yes,status=yes,menubar=no,scrollbars=yes');
        }

        function showBusiDataRuleWindow(id){
            if ($('#cluster-list').val() == ""){
                toastr.warning("请先从下拉框中选择一个集群！");
                return;
            }

            $('#wizard').bootstrapWizard('show', 0);//显示第一页
            var form1 = $('#busi-data-rule-form1');
            var title = $('#busi-data-rule-window-title');
            if (id == undefined){
                title.text('新增配置');
                form1[0].reset();
                form1.find('input[name="id"]').val('');//隐藏字段不会reset，需要手工设置
                $('#mappingClass').val('');
                $('#scheduleFlag').prop('checked', 'checked');
                showConditionView('0');
            }else{
                title.text('修改配置');
                var row = $('#busi-data-rule-table').bootstrapTable('getRowByUniqueId', id);
                //console.info($('#busi-data-rule-form1')[0].elements);
                $.each(form1.serializeArray(), function(index, elem){
                    form1.find("[name='"+elem.name+"']").val(row[elem.name]);
                });
            }
            $("#busiTypeId,#datasourceId").selectpicker('render');
            $('#busi-data-rule-window').modal('show');
        }
        function setWizardFormData(){
            //如果是修改，需要设置已经选中的存储字段
            var id = $('#busi-data-rule-form1 input[name="id"]').val();
            if (id && id!=''){
                var row = $('#busi-data-rule-table').bootstrapTable('getRowByUniqueId', id);
                var saveFields = [];
                $.each(row.saveFields.split(SPLIT_CODE), function (index, elem) {
                    saveFields.push(elem);
                })
                $('#save-fields-table').bootstrapTable('checkBy',{field:'fieldName',values:saveFields});
                $('#incre-field-list').selectpicker('val', row.increField);
                $('#mappingClass').val(row.mappingClass);
                if (row.scheduleFlag == 0){
                    $('#scheduleFlag').prop('checked', 'checked');
                }else{
                    $('#scheduleFlag').removeProp('checked');
                }

                showConditionView(row.conditionType);
                //选择"没有条件"
                if ($('input[id="conditionType-0"]').prop('checked')){
                    $('input[id*="conditionType0-valueType-'+row.valueType+'"]').prop('checked', 'checked');
                }
                //选择"一个条件"
                if ($('input[id="conditionType-1"]').prop('checked')){
                    $('#conditionField-list').selectpicker('val', row.conditionField1);
                    $('input[id*="conditionType1-valueType-'+row.valueType+'"]').prop('checked', 'checked');
                }
                //选择"两个条件"
                if ($('input[id="conditionType-2"]').prop('checked')){
                    $('#conditionField1-list').selectpicker('val', row.conditionField1);
                    $('#conditionField2-list').selectpicker('val', row.conditionField2);
                }
                //选中“三个条件以上”
                if ($('input[id="conditionType-3"]').prop('checked')){
                    $('#uniqueField-list').selectpicker('val', row.uniqueField);
                    var conditionFields = [];
                    $.each(row.conditionFields.split(SPLIT_CODE), function (index, elem) {
                        conditionFields.push(elem);
                    })
                    $('#conditionFields-list').selectpicker('val', conditionFields);
                }
                //选择"通用多条件"
                if ($('input[id="conditionType-4"]').prop('checked')){
                    var conditionFields = [];
                    $.each(row.conditionFields.split(SPLIT_CODE), function (index, elem) {
                        conditionFields.push(elem);
                    })
                    $('#conditionFields2-list').selectpicker('val', conditionFields);
                    $('input[id*="conditionType4-valueType-'+row.valueType+'"]').prop('checked', 'checked');
                }

            }
        }
        function loadDataToSelect(selectEle, data, valueName, textName){
            selectEle.empty();
            for (var i = 0; i < data.length; i++){
                selectEle.append('<option value="'+data[i][valueName]+'">'+data[i][textName]+'</option>');
            }
            selectEle.selectpicker('refresh');
        }
        function saveBusiDataRule(){
            var conditionField1,conditionField2,uniqueField,conditionFields,valueType;
            //选择"没有条件"
            if ($('input[id="conditionType-0"]').prop('checked')){
                conditionType = 0;
                valueType = $('input[id*="conditionType0-valueType-"]:checked').val();
            }
            //选择"一个条件"（作为通用多条件的特殊类型，已经废弃）
            if ($('input[id="conditionType-1"]').prop('checked')){
                conditionField1 = $('#conditionField-list').val();
                if (conditionField1 == ''){
                    toastr.warning("请选择条件字段！");
                    return;
                }
                valueType = $('input[id*="conditionType1-valueType-"]:checked').val();
            }
            //选择"两个条件"
            if ($('input[id="conditionType-2"]').prop('checked')){
                conditionField1 = $('#conditionField1-list').val();
                if (conditionField1 == ''){
                    toastr.warning("请选择字段1！");
                    return;
                }
                conditionField2 = $('#conditionField2-list').val();
                if (conditionField2 == ''){
                    toastr.warning("请选择字段2！");
                    return;
                }
            }
            //选中“三个条件以上”
            if ($('input[id="conditionType-3"]').prop('checked')){
                uniqueField = $('#uniqueField-list').val();
                if (uniqueField == ''){
                    toastr.warning("请选择唯一键字段！");
                    return;
                }
                var selectedConditionFields = $('#conditionFields-list').val();
                if (selectedConditionFields == null){
                    toastr.warning("请至少选择一个字段！");
                    return false;
                }
                conditionFields = selectedConditionFields.join(SPLIT_CODE);
            }
            //选中“通用多条件”
            if ($('input[id="conditionType-4"]').prop('checked')){
                var selectedConditionFields = $('#conditionFields2-list').val();
                if (selectedConditionFields == null){
                    toastr.warning("请至少选择一个字段！");
                    return false;
                }
                conditionFields = selectedConditionFields.join(SPLIT_CODE);
                valueType = $('input[id*="conditionType4-valueType-"]:checked').val();
            }
            var params = {
                conditionType:$('input[id*="conditionType-"]:checked').val(),
                conditionField1: conditionField1,
                conditionField2: conditionField2,
                uniqueField: uniqueField,
                conditionFields: conditionFields,
                valueType: valueType
            };

            var selectedSaveFields = $('#save-fields-table').bootstrapTable('getSelections');
            params.saveFields = $.map(selectedSaveFields, function(value, index){
                return value.fieldName;
            }).join(SPLIT_CODE);
            params.increField = $('#incre-field-list').val();
            params.mappingClass = $('#mappingClass').val();
            if ($('#scheduleFlag').prop('checked')){
                params.scheduleFlag = 0;
            }else{
                params.scheduleFlag = 1;
            }

            var paramArray = $('#busi-data-rule-form1').serializeArray();
            for (var index = 0; index < paramArray.length; index++){
                var param = paramArray[index];
                params[param.name] = param.value;
            }
            params.clusterId = $('#cluster-list').val();
            $.post("${ctx}/busi-config/saveBusiDataRule", params, function (data) {
                if (data.success){
                    toastr.success("成功保存该业务配置！");
                    $('#busi-data-rule-window').modal('hide');
                    loadBusiDataRules();
                }
            });
        }




        function showBusiDatasourceDetailWindow(id){
            var title = $('#busi-datasource-detail-window-title');
            if (id == undefined){
                title.text('新增数据源');
                $('#busi-datasource-form')[0].reset();
                $('#datasource-id').val("");
            }else{
                title.text('修改数据源');
                var row = $('#busi-datasource-table').bootstrapTable('getRowByUniqueId', id);
                for (var key in row){
                    $('#datasource-'+key).val(row[key]);
                }
            }
            $('#busi-datasource-detail-window').modal('show');
        }
        function formatBusiDatasourceOperColumn(value, row, index){
            return '<a href="#" onclick="showBusiDatasourceDetailWindow(\''+ row.id + '\')">修改</a> '+
                    '<a href="#" onclick="removeBusiDatasource(\''+ row.id + '\')">删除</a> ';
        }
        function getBusiDatasourceParams(form){
            var paramArray = form.serializeArray();
            var params = {};
            for (var index = 0; index < paramArray.length; index++){
                var param = paramArray[index];
                //param.name="datasource-xxx"，需要截取datasource-
                params[param.name.substring(11)] = param.value;
            }
            return params;
        }
        function removeBusiDatasource(id) {
            var row = $('#busi-datasource-table').bootstrapTable('getRowByUniqueId', id);
            var index = layer.confirm('确认删除数据源 '+row.name+'？', {
                btn: ['确定','取消'], title: '删除确认', icon: 3
            }, function(){
                layer.close(index);
                $.post("${ctx}/busi-config/removeBusiDatasource", {id: id}, function (data) {
                    if (data.success){
                        toastr.success("成功删除该数据源！");
                        loadBusiDatasources();
                    }
                });
            }, function(){
            });

        }
        function loadBusiDatasources(){
            $.post("${ctx}/busi-config/getAllBusiDatasourceList", {}, function(data) {
                if (data.success){
                    var busiDatasourceDataList = data.result;
                    $('#busi-datasource-table').bootstrapTable('load', busiDatasourceDataList);
                    var datasourceId = $('#datasourceId');
                    var datasourceIdValue = datasourceId.selectpicker('val');
                    loadDataToSelect(datasourceId, busiDatasourceDataList, 'id', 'name');
                    datasourceId.selectpicker('val', datasourceIdValue);
                }
            });
        }



        function formatBusiTypeOperColumn(value, row, index) {
            return '<a href="#" onclick="removeBusiType(\''+ row.id + '\')">删除</a> ';
        }
        function removeBusiType(id) {
            if (id < 0){
                $('#busi-type-table').bootstrapTable('removeByUniqueId', id);
            }else{
                $.post("${ctx}/busi-config/removeBusiType", {id: id}, function (data) {
                    if (data.success){
                        toastr.success("成功删除该业务类型！");
                        $('#busi-type-table').bootstrapTable('removeByUniqueId', id);
                        loadBusiTypes();
                    }
                });
            }
        }
        function saveBusiType(){
            var data = $('#busi-type-table').bootstrapTable('getData');
            var newData = [];
            var updateData = [];
            for (var index = 0; index < data.length; index++){
                var row = data[index];
                if (row.flag){
                    if (row.busiCode == '' || row.busiName == ''){
                        toastr.warning("业务编码或业务名称没有配置完整，不能保存！");
                        return;
                    }
                    if (row.flag == 'N'){
                        newData.push(row);
                    }else{
                        updateData.push(row);
                    }
                }
            }
            $.ajax({
                url: "${ctx}/busi-config/saveBusiTypes",
                type : 'POST',
                data: $.toJSON({newList:newData, updateList:updateData}),
                contentType : 'application/json; charset=utf-8',
                dataType: 'json',
                success : function(data, status, xhr) {
                    if (data.success){
                        toastr.success("保存成功！");
                        $('#busi-type-window').modal('hide');
                        loadBusiTypes();
                    }
                }
            });
        }
        function loadBusiTypes(){
            $.post("${ctx}/busi-config/getAllBusiTypeList", {}, function(data) {
                if (data.success){
                    var searchBusiList = $('#search-busi-list');
                    var busiTypeId = $('#busiTypeId');
                    var searchBusiValue = searchBusiList.selectpicker('val');
                    var busiTypeIdValue = busiTypeId.selectpicker('val');
                    loadDataToSelect($('#busiTypeId, #search-busi-list'), data.result, "id", "busiName");
                    searchBusiList.selectpicker('val', searchBusiValue);
                    busiTypeId.selectpicker('val', busiTypeIdValue);
                    $('#busi-type-table').bootstrapTable('load', data.result);
                }
            });
        }


        function showConditionView(conditionType) {
            $('[id*="condition-view-"]').hide();
            $('[id*="condition-view-' + conditionType + '"]').show();
            $('input[id="conditionType-'+conditionType+'"]').prop('checked', 'checked');
        }

    </script>
</head>

<body>

<div class="page-title">
    <div class="btn-group pull-right">
        <%--<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">选择集群<span class="caret"></span></button>--%>
        <%--<ul class="dropdown-menu dropdown-menu-right" id="cluster-list">--%>
        <%--</ul>--%>
        <select id="cluster-list" class="selectpicker show-tick" title="请选择主用集群" data-live-search="true" data-size="5">
        </select>
    </div>
    <h3>配置业务数据</h3>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="widget-container fluid-height clearfix">
            <div class="heading">
                <i class="icon-search"></i>查询条件
            </div>
            <div class="widget-content padded clearfix">
                <form class="form-horizontal clearfix" id="search-form">
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="search-config-name">配置名称</label>
                        <div class="col-md-3">
                            <input class="form-control" id="search-config-name" name="search-config-name" type="text"
                                   placeholder=""/>
                        </div>
                        <label class="col-md-2 control-label" for="search-busi-list">所属业务系统</label>
                        <div class="col-md-3">
                            <select id="search-busi-list" class="selectpicker show-tick" title="请选择业务系统" data-live-search="true" data-size="5">
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary pull-right" id="search">开始查询</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="search-key-prefix">Key前缀</label>
                        <div class="col-md-3">
                            <input class="form-control" id="search-key-prefix" name="search-key-prefix" type="text" placeholder="" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="widget-container fluid-height clearfix">
            <div class="heading">
                <i class="icon-table"></i>已配置列表
            </div>
            <div class="widget-content padded clearfix">
                <button type="button" class="btn btn-primary pull-right" style="margin-right: 5px" id="add-busi-data-rule">
                    新增配置
                </button>
                <button type="button" class="btn btn-default pull-right" style="margin-right: 5px" data-toggle="modal"
                        data-target="#busi-datasource-window">配置数据源</button>
                <table id="busi-data-rule-table" data-toggle="table" data-unique-id="id"
                       data-classes="table table-hover table-no-bordered bg-white" data-striped="false"
                       data-single-select="false" data-show-header="true"
                       data-pagination="true" data-side-pagination="server" data-smart-display="true"
                       data-sortable="false"
                       data-locale="zh-US" data-query-params="queryBusiRuleParams">
                    <thead>
                    <tr>
                        <th data-field="id" data-title="配置ID" data-halign="left" data-align="left"
                            data-valign="middle" data-width="20%"></th>
                        <th data-field="configName" data-title="配置名称" data-halign="left" data-align="left"
                            data-valign="middle" data-width="35%"></th>
                        <th data-field="keyPrefix" data-title="Key前缀" data-halign="left" data-align="left"
                            data-valign="middle" data-width="30%"></th>
                        <th data-field="id" data-title="操作" data-formatter="formatOperColumn" data-halign="center"
                            data-align="left" data-valign="middle" data-width="15%"></th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="busi-type-window" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static" data-keyboard="false"><%--backdrop:static时,空白处不关闭;keyboard:false时,esc键盘不关闭--%>
    <div class="modal-dialog" style="width: 500px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">配置业务类型</h4>
            </div>
            <div class="modal-body">
                <button type="button" id="add-busi-type-btn" class="btn btn-primary">新增</button>
                <table id="busi-type-table" data-height="300" data-toggle="table" data-unique-id="id"
                       data-classes="table table-hover table-no-bordered bg-white" striped="false" singleSelect="false" showHeader="true" pagination="false" sortable="false" locale="zh-US">
                    <thead>
                    <tr>
                        <th data-field="busiCode" data-title="业务编码" data-editable="true" data-halign="left"
                            data-align="left" data-valign="middle" data-width="30%"></th>
                        <th data-field="busiName" data-title="业务名称" data-editable="true" data-halign="left"
                            data-align="left" data-valign="middle" data-width="60%"></th>
                        <th data-field="id" data-title="操作" data-formatter="formatBusiTypeOperColumn"
                            data-halign="center" data-align="center" data-valign="middle" data-width="10%"></th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="busi-type-save">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="busi-datasource-window" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" style="width: 600px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">配置数据源</h4>
                    </div>
                    <div class="modal-body">
                <button type="button" id="append-busi-datasource-btn" class="btn btn-primary">新增</button>
                <table id="busi-datasource-table" data-height="300" data-toggle="table" data-unique-id="id"
                       data-classes="table table-hover table-no-bordered bg-white" data-striped="false"
                       data-singleSelect="false" data-showHeader="true" data-pagination="false" data-sortable="false"
                       data-locale="zh-US">
                    <thead>
                    <tr>
                        <th data-field="name" data-title="名称" data-halign="left" data-align="left"
                            data-valign="middle" data-width="20%"></th>
                        <th data-field="jdbcUrl" data-title="JDBC URL"
                            data-halign="left" data-align="left" data-valign="middle" data-width="60%"></th>
                        <th data-field="id" data-title="操作" data-formatter="formatBusiDatasourceOperColumn"
                            data-halign="center" data-align="center" data-valign="middle" data-width="20%"></th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="busi-datasource-detail-window" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 700px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="busi-datasource-detail-window-title">新增数据源</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="busi-datasource-form" style="padding-right: 20px">
                    <div class="form-group">
                        <label for="datasource-name" class="col-md-2 control-label">名称</label>
                        <div class="col-md-4">
                            <input type="hidden" id="datasource-id" name="datasource-id" value="">
                            <input type="text" class="form-control required" id="datasource-name"
                                   name="datasource-name" placeholder="" required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="datasource-driverClass" class="col-md-2 control-label">JDBC驱动类名</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="datasource-driverClass"
                                   name="datasource-driverClass" placeholder="" required="true"
                                   value="oracle.jdbc.driver.OracleDriver">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="datasource-jdbcUrl" class="col-md-2 control-label">JDBC URL</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="datasource-jdbcUrl"
                                   name="datasource-jdbcUrl" placeholder="" required="true"
                                   value="jdbc:oracle:thin:@[ip]:1521:[sid]">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="datasource-userName" class="col-md-2 control-label">登录用户名</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="datasource-userName"
                                   name="datasource-userName" placeholder="" required="true">
                        </div>
                        <label for="datasource-password" class="col-md-2 control-label">登录密码</label>
                        <div class="col-md-4">
                            <input type="password" class="form-control" id="datasource-password"
                                   name="datasource-password" placeholder="" required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="datasource-properties" class="col-md-2 control-label">连接池属性</label>
                        <div class="col-md-10">
                            <textarea class="form-control" id="datasource-properties" name="datasource-properties"
                                      rows="3">initialPoolSize=1;minPoolSize=1;maxPoolSize=10;maxIdleTime=1800;maxConnectionAge=3600;idleConnectionTestPeriod=60;preferredTestQuery=select 1 from dual</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-2">
                            <button type="button" class="btn btn-primary" id="busi-datasource-check">测试连接</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="busi-datasource-save">保存</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="busi-data-rule-window" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="busi-data-rule-window-title">修改业务配置</h4>
            </div>
            <div class="modal-body">

                <div class="wizard" id="wizard">

                    <div class="padded">
                        <ul>
                            <li>
                                <span class="label">1</span>
                                <a data-toggle="tab" href="#tab1">配置数据源和SQL语句等参数</a>
                            </li>
                            <li>
                                <span class="label">2</span>
                                <a data-toggle="tab" href="#tab2">配置需要存储的字段</a>
                            </li>
                            <li>
                                <span class="label">3</span>
                                <a data-toggle="tab" href="#tab3">配置存储规则</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane" id="tab1">
                                <div class="panel">
                                    <div class="panel-body">
                                        <form class="form-horizontal" role="form" id="busi-data-rule-form1">
                                            <div class="form-group">
                                                <input type="hidden" id="id" name="id" value="">
                                                <label class="col-md-2 control-label" for="configName">配置名称</label>
                                                <div class="col-md-4">
                                                    <input class="form-control" id="configName" name="configName"
                                                           type="text" placeholder="" required="true" />
                                                </div>
                                                <label class="col-md-1 control-label" for="busiTypeId">业务类型</label>
                                                <div class="col-md-5">
                                                    <select id="busiTypeId" name="busiTypeId"
                                                            class="selectpicker show-tick" required="true"
                                                            title="请选择业务类型" data-live-search="true" data-size="5">
                                                    </select>
                                                    <button class="btn btn-default-outline" type="button"
                                                            data-toggle="modal" data-target="#busi-type-window"
                                                            style="vertical-align:top;"><i
                                                            class="icon-edit"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="keyPrefix">Key前缀</label>
                                                <div class="col-md-4">
                                                    <input class="form-control" id="keyPrefix" name="keyPrefix"
                                                           type="text" placeholder="" required="true"/>
                                                </div>
                                                <label class="col-md-1 control-label" for="datasourceId">数据源
                                                </label>
                                                <div class="col-md-5">
                                                    <select id="datasourceId" name="datasourceId"
                                                            class="selectpicker show-tick" required="true"
                                                            title="请选择数据源" data-live-search="true" data-size="5">
                                                    </select>
                                                    <button class="btn btn-default-outline" type="button" data-toggle="modal"
                                                            data-target="#busi-datasource-window"
                                                            style="margin-bottom: 0px;vertical-align:top;"><i
                                                            class="icon-edit"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="sql">SQL语句</label>
                                                <div class="col-md-9">
                                                    <textarea class="form-control" id="sql" name="sql" required="true"
                                                              rows="6"></textarea>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab2">
                                <div class="panel">
                                    <div class="panel-body">
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group" style="padding-bottom: 20px">
                                                <div class="col-md-1">
                                                </div>
                                                <div class="col-md-4">
                                                    <table id="save-fields-table" data-height="250" data-toggle="table"
                                                           data-classes="table table-hover table-no-bordered bg-white" striped="false" singleSelect="false" showHeader="true" pagination="false" sortable="false" locale="zh-US">
                                                        <thead>
                                                        <tr>
                                                            <th data-field="state" data-checkbox="true"></th>
                                                            <th data-field="fieldName" data-title="需要存储的字段"
                                                                data-halign="left" data-align="left"
                                                                data-valign="middle"></th>
                                                        </tr>
                                                        </thead>
                                                    </table>
                                                </div>
                                                <div class="col-md-7">
                                                    <div class="form-group">
                                                        <label class="col-md-4 control-label" for="incre-field-list">增量字段
                                                        </label>
                                                        <div class="col-md-4">
                                                            <select id="incre-field-list" class="selectpicker show-tick"
                                                                    title="请选择增量字段" data-live-search="true"
                                                                    data-size="5">
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-md-4 control-label" for="mappingClass">行数据映射类名
                                                        </label>
                                                        <div class="col-md-7">
                                                            <input class="form-control" id="mappingClass"
                                                                   name="mappingClass" type="text" placeholder="" required="true" />
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-md-4 control-label">
                                                        </label>
                                                        <label class="col-md-7 checkbox">
                                                            <input type="checkbox" id="scheduleFlag" name="scheduleFlag" checked>
                                                            <span>允许通过后台调度写入redis</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab3">
                                <div class="panel">
                                    <div class="panel-body">
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group" style="border-bottom: 1px solid #d6d6d6;padding-bottom:10px">
                                                <label class="col-md-2 control-label">选择存储规则：</label>
                                                <div class="col-md-10">
                                                    <label class="radio-inline">
                                                        <input id="conditionType-0" name="conditionType" type="radio" value="0" checked>
                                                        <span>单一键值存储</span>
                                                    </label>
                                                    <%--<label class="radio-inline">--%>
                                                        <%--<input id="conditionType-1" name="conditionType" type="radio" value="1">--%>
                                                        <%--<span>一个条件</span>--%>
                                                    <%--</label>--%>
                                                    <label class="radio-inline">
                                                        <input id="conditionType-2" name="conditionType" type="radio" value="2">
                                                        <span>hash结构</span>
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input id="conditionType-3" name="conditionType" type="radio" value="3">
                                                        <span>set结构</span>
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input id="conditionType-4" name="conditionType" type="radio" value="4">
                                                        <span>list结构</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-md-11" id="condition-view-0">
                                                    <div class="form-group">
                                                        <label class="col-md-2 control-label">键名称：</label>
                                                        <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                            <span>[业务编码]:[KEY前缀]:LIST</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-md-2 control-label">值存储类型：</label>
                                                        <div class="col-md-8">
                                                            <label class="radio-inline">
                                                                <input id="conditionType0-valueType-string" name="conditionType0-valueType" type="radio" value="string">
                                                                <span>string</span>
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input id="conditionType0-valueType-list"
                                                                       name="conditionType0-valueType" type="radio" value="list" checked="checked">
                                                                <span>list</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-md-2 control-label">值数据格式：</label>
                                                        <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                            <span>json array</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <%--<div class="col-md-11" id="condition-view-1">--%>
                                                    <%--<div class="form-group">--%>
                                                        <%--<label class="col-md-2 control-label">条件字段：</label>--%>
                                                        <%--<div class="col-md-4" style="padding-left:20px">--%>
                                                            <%--<select id="conditionField-list"--%>
                                                                    <%--class="selectpicker show-tick"--%>
                                                                    <%--title="请选择条件字段" data-live-search="true"--%>
                                                                    <%--data-size="5">--%>
                                                            <%--</select>--%>
                                                        <%--</div>--%>
                                                        <%--<div class="col-md-6">--%>
                                                            <%--<div class="form-group">--%>
                                                                <%--<label class="col-md-4 control-label">键名称：</label>--%>
                                                                <%--<div class="col-md-8" style="padding-top: 7px;padding-left:20px">--%>
                                                                    <%--<span>[业务编码]:[KEY前缀]:[条件字段值]</span>--%>
                                                                <%--</div>--%>
                                                            <%--</div>--%>
                                                            <%--<div class="form-group">--%>
                                                                <%--<label class="col-md-4 control-label">值存储类型：</label>--%>
                                                                <%--<div class="col-md-8">--%>
                                                                    <%--<label class="radio-inline">--%>
                                                                        <%--<input id="conditionType1-valueType-string" name="conditionType1-valueType" type="radio" value="string">--%>
                                                                        <%--<span>string</span>--%>
                                                                    <%--</label>--%>
                                                                    <%--<label class="radio-inline">--%>
                                                                        <%--<input id="conditionType1-valueType-list"--%>
                                                                               <%--name="conditionType1-valueType" type="radio"--%>
                                                                               <%--value="list" checked="checked">--%>
                                                                        <%--<span>list</span>--%>
                                                                    <%--</label>--%>
                                                                <%--</div>--%>
                                                            <%--</div>--%>
                                                            <%--<div class="form-group">--%>
                                                                <%--<label class="col-md-4 control-label">值数据格式：</label>--%>
                                                                <%--<div class="col-md-8" style="padding-top: 7px;padding-left:20px">--%>
                                                                    <%--<span>json array</span>--%>
                                                                <%--</div>--%>
                                                            <%--</div>--%>
                                                        <%--</div>--%>
                                                    <%--</div>--%>
                                                <%--</div>--%>
                                                <div class="col-md-11" id="condition-view-2">
                                                    <div class="form-group">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">字段1：</label>
                                                                <div class="col-md-8" style="padding-left:20px">
                                                                    <select id="conditionField1-list"
                                                                            class="selectpicker show-tick"
                                                                            title="请选择字段1" data-live-search="true"
                                                                            data-size="5">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">字段2：</label>
                                                                <div class="col-md-8" style="padding-left:20px">
                                                                    <select id="conditionField2-list"
                                                                            class="selectpicker show-tick"
                                                                            title="请选择字段2" data-live-search="true"
                                                                            data-size="5">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">键名称：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>[业务编码]:[KEY前缀]:[字段1的值]</span>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">值存储类型：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>Hash</span>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">值数据格式：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>Hash键：[字段2的值]；Hash值：json array string</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-11" id="condition-view-3">
                                                    <div class="form-group">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">唯一键字段：</label>
                                                                <div class="col-md-8" style="padding-left:20px">
                                                                    <select id="uniqueField-list"
                                                                            class="selectpicker show-tick"
                                                                            title="请选择唯一键字段" data-live-search="true"
                                                                            data-size="5">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">选择N个字段：</label>
                                                                <div class="col-md-8" style="padding-left:20px">
                                                                    <select id="conditionFields-list"
                                                                            class="selectpicker show-tick" multiple="multiple"
                                                                            title="请选择字段，可多选" data-live-search="true"
                                                                            data-size="5">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">键名称：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>[业务编码]:[KEY前缀]:[唯一键字段值]</span>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">值存储类型：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>String</span>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">值数据格式：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>json</span>
                                                                </div>
                                                            </div>
                                                            <div class="form-group" style="border-top: 1px solid #d6d6d6">
                                                                <label class="col-md-4 control-label">字段N键名：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>[业务编码]:[KEY前缀]:[字段N名称]:[字段N值]</span>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">字段N键值：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>Set[唯一键字段值]</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-11" id="condition-view-4">
                                                    <div class="form-group">
                                                        <label class="col-md-2 control-label">选择N个字段：</label>
                                                        <div class="col-md-4" style="padding-left:20px">
                                                            <select id="conditionFields2-list"
                                                                    class="selectpicker show-tick" multiple="multiple"
                                                                    title="请选择字段，可多选" data-live-search="true"
                                                                    data-size="5">
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">键名称：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>[业务编码]:[KEY前缀]:[字段1值]...[字段N值]</span>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">值存储类型：</label>
                                                                <div class="col-md-8">
                                                                    <label class="radio-inline">
                                                                        <input id="conditionType4-valueType-string"
                                                                               name="conditionType4-valueType"
                                                                               type="radio" value="string">
                                                                        <span>string</span>
                                                                    </label>
                                                                    <label class="radio-inline">
                                                                        <input id="conditionType4-valueType-list"
                                                                               name="conditionType4-valueType"
                                                                               type="radio"
                                                                               value="list" checked="checked">
                                                                        <span>list</span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-md-4 control-label">值数据格式：</label>
                                                                <div class="col-md-8" style="padding-top: 7px;padding-left:20px">
                                                                    <span>json array</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pager">
                        <div class="btn btn-default btn-previous">
                            <i class="icon-long-arrow-left"></i>上一步
                        </div>
                        <div class="btn btn-primary btn-next">
                            下一步<i class="icon-long-arrow-right"></i>
                        </div>
                        <div class="btn btn-primary btn-finish">
                            完成
                        </div>
                        <button class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


</body>
</html>
